<template>
  <section>
    <el-row type="flex" justify="space-between" class="button-box">
      <el-col :span="12" class="left">
        <el-select v-model="activeStatusId" placeholder="请选择状态">
          <el-option v-for="(status, index) in statusList" :label="status.name" :key="index" :value="status.id"></el-option>
        </el-select>
        <el-input placeholder="请输入mac地址" class="search-input" v-model="params.search">
          <el-button slot="append" @click="searchDevice">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="12" class="right">
        <el-button type="info" @click="multipleSelectionChange('disable')">批量拒绝</el-button>
        <el-button type="success" @click="multipleSelectionChange('enable')">批量通过</el-button>
      </el-col>
    </el-row>
    <device-table :listLoading="listLoading" :tableColumn="tableColumn" :tableData="tableData" :currentPage="currentPage" :total="total" :multipleFlag="multipleFlag" @handleSelectionChange="handleSelectionChange" :buttonGroup="buttonGroup" :pageSize="pageSize"
      @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template slot="mac" slot-scope="scope">
        <span>{{ JSON.parse(scope.row.content).mac }}</span>
      </template>
      <template slot="product" slot-scope="scope">
        <span>{{ JSON.parse(scope.row.content).product }}</span>
      </template>
      <template slot="status" slot-scope="scope">
        <span>{{ scope.row.status | reviewStatusFilter }}</span>
      </template>
      <template slot="crtime" slot-scope="scope">
        <span>{{ scope.row.crtime | crtimeFilter }}</span>
      </template>
    </device-table>
  </section>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import DeviceTable from '@components/Table'
  import { getReviewList, updateReviewStatus } from '@api/device'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      DeviceTable
    },
    mixins: [utilMixin]
  })
  export default class DeviceCheck extends Vue {
    data() {
      return {
        statusList: [{ id: 99, name: '全部' }, { id: 0, name: '待审核' }, { id: 1, name: '已通过' }, { id: -1, name: '已拒绝' }], //产品列表
        activeStatusId: 0, //当前激活的状态ID
        dialogVisible: false, //form表单是否显示
        form: {}, //form表单提交对象
        tip: "特别说明：deviceName可以为空,当为空时,阿里云会颁发全局唯一标识符作为deviceName。", //表单tip
        tableColumn: [ //表格列对象
          { type: "id", name: "序号", operate: false },
          { type: "mac", name: "mac地址", operate: true },
          { type: "product", name: "产品名称", operate: true },
          { type: "status", name: "授权状态", operate: true },
          { type: "crtime", name: "创建时间", operate: true }
        ],
        tableData: [], //表格数据
        multipleFlag: true, //是否支持多选
        multipleSelection: [], //多选数组
        currentPage: 1, //当前页码
        buttonGroup: [] //表格按钮数组
      }
    }
    @Watch('pageSize')
    pageSizeChange(val) { //监听一页数量
      this.params.limit = val;
      this.fetchData();
    }
    @Watch('pageIndex')
    pageIndexChange(val) { //监听页码索引
      this.currentPage = val - 0 + 1;
      this.params.offset = this.startOffsetNum;
      this.fetchData();
    }
    @Watch('activeStatusId')
    activeStatusIdChange(val) { //监听当前下拉状态
      this.multipleFlag = val == 0 ? true : false;
      if (val == 99) {
        delete this.params.status;
      } else {
        this.params.status = val;
      }
      this.pageIndex = 0;
      this.fetchData();
    }
    mounted() {
      this.params.offset = this.startOffsetNum;
      this.params.limit = this.pageSize;
      this.params.status = this.activeStatusId;

      this.$nextTick(function() {
        this.fetchData();
      })
    }
    fetchData() { //初始化表格数据
      this.listLoading = true
      getReviewList(this.params).then(response => {
        let res = response.data;
        if (res.status) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    changeVisible(val) { //表单关闭回调方法
      this.dialogVisible = val;
    }
    submitForm() { //表单提交方法
      this.dialogVisible = false
    }
    handleSelectionChange(rowData) { //多选数组回调方法
      this.multipleSelection = rowData;
    }
    multipleSelectionChange(type) { //多选回调方法
      console.log(this.multipleSelection);
      if (!this.multipleSelection.length) {
        this.showMessage('请先勾选需要通过授权的设备', 'warning');
        return;
      }
      let ids = this.multipleSelection.map(item => item.id);
      ids = ids.join(',');
      let deviceData = { ids: ids };
      switch (type) {
        case "disable":
          deviceData.status = -1;
          this.commonUpdateDeviceStatus(deviceData);
          break;
        case "enable":
          deviceData.status = 1;
          this.commonUpdateDeviceStatus(deviceData);
          break;
      }
    }
    commonUpdateDeviceStatus(deviceData) { //授权通过的方法
      updateReviewStatus(deviceData).then(response => {
        let res = response.data;
        if (res.status) {
          let success_arr = [],
            error_arr = [];
          for (let [key, value] of Object.entries(res.data)) {
            if (value) {
              success_arr.push(key);
            } else {
              error_arr.push(key);
            }
          }
          let message = "",
            statusTip = deviceData.status == 1 ? '通过' : '拒绝';
          if (success_arr.length) {
            message += '<strong>序号为' + success_arr.join(',') + '授权' + statusTip + '成功。</strong><br/>';
          }
          if (error_arr.length) {
            message += '<strong>序号为' + error_arr.join(',') + '授权操作失败，请重试或者联系管理员！</strong>';
          }
          this.showConfirmMessage(message, true);
          this.pageIndex = 0;
          this.fetchData();
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    searchDevice() { //搜索方法
      this.pageIndex = 0;
      this.fetchData();
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@scss/theme/table.scss';
</style>
